import clsx from "clsx";
import Heading from "@theme/Heading";
import styles from "./styles.module.css";
import useBaseUrl from "@docusaurus/useBaseUrl";

const FeatureList = [
  {
    title: "帮助文档",
    Svg: require("@site/static/img/helpLogo.svg").default,
    description: <>自己写的文档</>,
  },
  {
    title: "自己开发的新系统",
    IMG2: "/img/icon_ant_design.svg",
    description: <>自己开发的系统</>,
  },
  {
    title: "不知道写什么好",
    Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
    description: <>广告位招租</>,
  },
];

function Feature({ Svg, title, description, IMG2 }) {
  console.log(IMG2);
  return (
    <div className={clsx("col col--4")}>
      <div className="text--center">
        {Svg ? (
          <Svg className={styles.featureSvg} role="img" />
        ) : (
          IMG2 && <img className={styles.featureSvg} src={useBaseUrl(IMG2)} />
        )}
      </div>
      <div className="text--center padding-horiz--md">
        <Heading as="h3">{title}</Heading>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}
